const { src, dest, series, parallel } = require('gulp');
const htmlmin = require('gulp-htmlmin')  // 压缩html
const cssforSass = require('gulp-sass'); // 转译 sass  css
const minicss = require('gulp-csso'); // 压缩
const babel = require('gulp-babel')   // 转译es6
const concat = require('gulp-concat')   // 拼接
const imagemin = require('gulp-imagemin') //压缩处理图片
const uglify = require('gulp-uglify'); // 压缩js
const webserver = require('gulp-webserver'); // 起服务 （读文件，写接口）

// 处理html gulp-htmlmin
function html() {
  return src('src/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true, // //压缩HTML
      minifyJS: true,  //压缩页面JS
      minifyCSS: true  //压缩页面CSS
    }))
    .pipe(dest('dist/')) // 我把处理后的html输出到dist
}

// 处理css (压缩  转译scss)
function sass() {
  return src('src/css/*.scss')
    .pipe(cssforSass()) // 转译为css
    .pipe(minicss())
    .pipe(dest('dist/css'))
}

// 处理js (babel转译 合并js)
function js() {
  return src('src/js/*js')
    .pipe(babel({
      presets: ['@babel/env']
    }))   // 将es6转译为es5代码
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(dest('dist/js'))
}

// 处理图片
function image() {
  return src('src/img/*.png')
    .pipe(imagemin({
      progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
    }))
    .pipe(dest('./dist/img'));
}

function server() {
  return src('dist')
    .pipe(webserver({
      livereload: true, // 热更新
      // directoryListing: true,
      open: true, // 自动打开页面
      middleware: []
    }));
}

// module.exports = {
//   html,
//   sass,
//   js,
//   image
// }

// exports.server = server;

// 合并执行  npx gulp 执行了所有的任务
exports.default = series(html, sass, js, image, server);
